<template>
	<view class="template-details" style="height: auto;">

		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>
		<!-- 顶部自定义导航结束 -->

		<!-- 用户列表开始 -->
		<view class="user-list" :style="{paddingTop: vuex_custom_bar_height + 'px'}">>
			<view class="item" v-for="(item, index) in list" :key="index">
				<image class="image" :src="item.user.avatar_url"></image>
				<view class="text">
					<view class="title">{{ item.user.nickname }}</view>
					<view class="subtitle">关注时间: {{ item.attention_time }}</view>
				</view>
				<!-- <view class="button">{{ item.button }}</view> -->
			</view>
		</view>
		<!-- 用户列表结束 -->

	</view>

</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import { fansList } from "@/utils/api/author.js"
	export default {
		name: 'AuthorAttension',
		mixins: [template_page_mixin],
		data() {
			return {
				list: [],
				searchWhere: {
					size: 20,
					page: 1,
				},
				isOver: false,
			}
		},
		onShow() {
			this.getFansList()
		},
		methods: {
			getFansList() {
				if (this.isOver) {
					this.$func.showToast("暂无新数据")
					this.isOver = true
					return
				}
				fansList(this.searchWhere).then(res => {
					if (res.items.length == 0) {
						this.$func.showToast("暂无新数据", 3000, true)
						this.isOver = true
						return
					}
					this.list.push(...res.items)
					this.searchWhere.page = res.page + 1
				})
			}
		},
		onReachBottom() {
			this.getFansList()
		}
	}
</script>

<style scoped lang="scss">
	@import "@/scss/custom_nav_bar.scss";
	@import "@/scss/user_list.scss";
</style>